<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Video Intelligence (vi) | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Video Intelligence (vi) | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Video Intelligence (vi)</h1>
          <ul class="docs-index"></ul>
          <p><a href="http://vi.ai" target="_blank">Video Intelligence</a> component that built into Framework7 allows you to easily add video advertising to your Framework7 app, straight out-of-the-box.</p>
          <p>vi's interstitial ads can be placed into your app experience at your discretion, showing full screen video ads. Advertisers pay a premium for these ad slots, and they will be directly connected to your app; you'll be able to monetise straight away.</p>
          <h2>Getting Started With vi</h2>
          <h4>1. Sign up for Framework7 vi publisher account</h4>
          <p>First of all as a mobile publisher you need to create vi publisher account. To signup for Framework7 vi account go to <a href="http://vi.framework7.io/" target="_blank">vi.framework7.io</a> and fill up the following form:</p><img src="/i/docs/vi-1.png">
          <h4>2. Setup your app at vi</h4>
          <p>After successful registration you will receive instructions with vi dashboard link and temporary password to the specified email.</p>
          <p>When you log in to your vi dashboard you will see a list of your apps. If you don’t have apps create new one:</p><img src="/i/docs/vi-2.png">
          <p>When you already have an app, you need to <b>add placement</b> for this app:</p><img src="/i/docs/vi-3.png">
          <p>When you create place choose Placement Type: "Video Interstitial"</p><img src="/i/docs/vi-4.png">
          <p>Ok, after we have placement created we need placement ID, choose just created placement:</p><img src="/i/docs/vi-5.png">
          <p>Click “copy” near the placement id string to copy id to the clipboard</p><img src="/i/docs/vi-6.png">
          <h4>3. Configure vi in Framework7 app</h4>
          <p>After we set the things up at vi dashboard we will have:</p>
          <ul>
            <li>App bundle id (e.g. <code>io.framework7.testapp</code>)</li>
            <li>Placement id (e.g. <code>pltd4o7ibb9rc653x14</code>)</li>
          </ul>
          <p>Now when we have our vi placement id we may set it up in Framework7 on the app initialization:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/*
    common app bundle id must match the one
    you have specified when created app in vi dashboard:
  */</span>
  id<span class="token punctuation">:</span> <span class="token string">'io.framework7.testapp'</span><span class="token punctuation">,</span>

  <span class="token comment">/* add vi placement id under the vi module parameters */</span>
  vi<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    placementId<span class="token punctuation">:</span> <span class="token string">'pltd4o7ibb9rc653x14'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h4>4. Show Ad</h4>
          <p>That is all, now we can use Framework7’s vi API to create and show ads. In simplest way just call the following method when you need to show an ad:</p><pre><code class="js">app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>vi App Methods</h2>
          <p>Let's look at available vi app methods and properties:</p>
          <table class="methods-table">
            <tr>
              <td>app.vi.createAd(parameters)</td>
              <td>Create (and show) vi video ad.
                <ul class="method-parameters">
                  <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> with vi ad parameters</li>
                  <li class="method-returns">Method returns vi ad instance</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>app.vi.loadSdk()</td>
              <td>Loads vi SDK. By default if vi is not disabled in app parameters then it will load it automatically</td>
            </tr>
            <tr>
              <td>app.vi.sdkReady</td>
              <td>Boolean property indicating whether the vi SDK is ready or not</td>
            </tr>
          </table>
          <h2>vi Ad Parameters</h2>
          <p>Let's look at list of all available parameters when we create vi ad:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>enabled</td>
                <td>boolean</td>
                <td>false</td>
                <td>Global app parameter which enables vi API and vi SDK to load. If you pass any vi parameters under <code>vi</code> app parameters then it will enable vi api as well</td>
              </tr>
              <tr>
                <td>appId</td>
                <td>string</td>
                <td></td>
                <td>App bundle id, if not specified then equal to <code>id</code> <a href="app.html#app-parameters">app parameter</a></td>
              </tr>
              <tr>
                <td>placementId</td>
                <td>string</td>
                <td>pltd4o7ibb9rc653x14</td>
                <td>vi placemenet ID, you can use this one for testing, and switch to yours real one for production</td>
              </tr>
              <tr>
                <td>placementType</td>
                <td>string</td>
                <td>interstitial</td>
                <td>Ad type. Can be <code>interstitial</code> (when ad runs as full screen video) or <code>instream</code> (when ad video )</td>
              </tr>
              <tr>
                <td>autoplay</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables video ad autoplay</td>
              </tr>
              <tr>
                <td>startMuted</td>
                <td>boolean</td>
                <td></td>
                <td>Defines whether the ad must start muted or not. By default is <code>true</code> when app is running as a web app (not Cordova) under mobile device (iOS or Android). It is required because on mobile device video autoplay usually requires additional user interaction</td>
              </tr>
              <tr>
                <td>fallbackOverlay</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables overlay layer that will be visible when ad can not autoplay (in case video autoplay requires user interaction)</td>
              </tr>
              <tr>
                <td>fallbackOverlayText</td>
                <td>string</td>
                <td>Please watch this ad</td>
                <td>Fallback overlay text</td>
              </tr>
              <tr>
                <td>appVer</td>
                <td>string</td>
                <td></td>
                <td>App version, if not specified then equal to <code>version</code> <a href="app.html#app-parameters">app parameter</a></td>
              </tr>
              <tr>
                <td>language</td>
                <td>boolean</td>
                <td>null</td>
                <td>App language, if not specified then equal to <code>language</code> <a href="app.html#app-parameters">app parameter</a></td>
              </tr>
              <tr>
                <td>width</td>
                <td>number</td>
                <td></td>
                <td>App width in px. If not specified then equal to app container width</td>
              </tr>
              <tr>
                <td>height</td>
                <td>number</td>
                <td></td>
                <td>App height in px. If not specified then equal to app container height</td>
              </tr>
              <tr>
                <td>showProgress</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable ad interface progress bar</td>
              </tr>
              <tr>
                <td>showBranding</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable ad interface vi branding logo</td>
              </tr>
              <tr>
                <td>showMute</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable ad interface mute button</td>
              </tr>
              <tr>
                <td>os</td>
                <td>string</td>
                <td></td>
                <td>Operating system, if not specified then will be equal to <code>app.device.os</code></td>
              </tr>
              <tr>
                <td>osVersion</td>
                <td>string</td>
                <td></td>
                <td>Operating system version, if not specified then will be equal to <code>app.device.osVersion</code></td>
              </tr>
              <tr>
                <td>orientation</td>
                <td>string</td>
                <td></td>
                <td>Device orientation, if not specified then will be detected based on <code>window.orientation</code></td>
              </tr>
              <tr>
                <td>age</td>
                <td>number</td>
                <td></td>
                <td>User age (optional)</td>
              </tr>
              <tr>
                <td>gender</td>
                <td>string</td>
                <td></td>
                <td>User gender (optional)</td>
              </tr>
              <tr>
                <td>advertiserId</td>
                <td>string</td>
                <td></td>
                <td>Unique advertiser identifier (optional)</td>
              </tr>
              <tr>
                <td>latitude</td>
                <td>integer</td>
                <td></td>
                <td>Device location latitude (optional)</td>
              </tr>
              <tr>
                <td>longitude</td>
                <td>integer</td>
                <td></td>
                <td>Device location longitude (optional)</td>
              </tr>
              <tr>
                <td>storeId</td>
                <td>string</td>
                <td></td>
                <td>App store id (optional)</td>
              </tr>
              <tr>
                <td>ip</td>
                <td>string</td>
                <td></td>
                <td>Device IP address (optional)</td>
              </tr>
              <tr>
                <td>manufacturer</td>
                <td>string</td>
                <td></td>
                <td>Device manufacturer (optional)</td>
              </tr>
              <tr>
                <td>model</td>
                <td>string</td>
                <td></td>
                <td>Device model</td>
              </tr>
              <tr>
                <td>connectionType</td>
                <td>string</td>
                <td></td>
                <td>Device connection type (optional)</td>
              </tr>
              <tr>
                <td>connectionProvider</td>
                <td>string</td>
                <td></td>
                <td>Device connection provider (optional)</td>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> viAd <span class="token operator">=</span> app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">stopped</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Ad video stopped'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="important-note">
            <p>All parameters can be used in global app parameters under <code>vi</code> property to set defaults for all vi ads. For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/*
    common app bundle id must match the one
    you have specified when created app in vi dashboard:
  */</span>
  id<span class="token punctuation">:</span> <span class="token string">'io.framework7.testapp'</span><span class="token punctuation">,</span>

  <span class="token comment">/* global vi parameters */</span>
  vi<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    placementId<span class="token punctuation">:</span> <span class="token string">'pltd4o7ibb9rc653x14'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
            <p>In this case when we create vi ad, we need to pass parameters that we want to override:</p><pre><code class="js"><span class="token keyword">var</span> viAd <span class="token operator">=</span> app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// disable autoplay for this ad</span>
  autoplay<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          </div>
          <h2>vi Ad Methods & Properties</h2>
          <p>So to create vi ad we have to call:</p><pre><code class="js"><span class="token keyword">var</span> viAd <span class="token operator">=</span> app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/* parameters */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>After that we have its initialized instance (like <code>viAd</code> variable in example above) with useful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>viAd.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>viAd.ad</td>
                <td>Original vi ad instance</td>
              </tr>
              <tr>
                <td>viAd.params</td>
                <td>vi ad parameters</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>viAd.start()</td>
                <td>Start ad video. Useful in case of disabled autoplay</td>
              </tr>
              <tr>
                <td>viAd.pause()</td>
                <td>Pause ad video</td>
              </tr>
              <tr>
                <td>viAd.resume()</td>
                <td>Resume ad video</td>
              </tr>
              <tr>
                <td>viAd.stop()</td>
                <td>Stop ad video, in this case ad will be closed and destroyed. It will be impossible to proceed with this video ad</td>
              </tr>
              <tr>
                <td>viAd.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>viAd.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>viAd.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>viAd.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>viAd.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h2>vi Ad Events</h2>
          <p>vi ad will fire the following events on vi ad instance:</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>ready</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered when ad created, requested and ready to be played. In case of disabled autplay, you to listen for this event and call <code>viAd.start()</code> when ad becomes ready</td>
              </tr>
              <tr>
                <td>started</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered when ad video started to play</td>
              </tr>
              <tr>
                <td>click</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered after click on ad video</td>
              </tr>
              <tr>
                <td>click</td>
                <td>viAd</td>
                <td><span>url</span></td>
                <td>Event will be triggered after click on ad video. As an argument it received click target URL. Use this url only in case if ad target url can not be opened by your device/app</td>
              </tr>
              <tr>
                <td>impression</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered on ad impression</td>
              </tr>
              <tr>
                <td>stopped</td>
                <td>viAd</td>
                <td><span>reason</span></td>
                <td>Event will be triggered when video ad stopped. As an argument it receives string <code>reason</code>, which can be, for example, <code>userexit</code> (when video was interrupted by user) or <code>complete</code> when ad video completed</td>
              </tr>
              <tr>
                <td>complete</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered when video ad finished</td>
              </tr>
              <tr>
                <td>userexit</td>
                <td>viAd</td>
                <td><span></span></td>
                <td>Event will be triggered when user closed the video ad</td>
              </tr>
              <tr>
                <td>autoplayFailed</td>
                <td>viAd</td>
                <td><span>reason</span></td>
                <td>Event will be triggered in case of enabled autoplay and it failed to start an ad (for example when additional user interraction required)</td>
              </tr>
              <tr>
                <td>error</td>
                <td>viAd</td>
                <td><span>error</span></td>
                <td>Event will be triggered on ad error. As an argument it receives error message</td>
              </tr>
            </tbody>
          </table>
          <h4>App Events</h4>
          <p>vi component also fires events on app instance:</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>viSdkReady</td>
                <td>app</td>
                <td><span></span></td>
                <td>Event will be triggered when vi SDK loaded and ready to be used</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/vi.html">Examples</h2><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> <span class="token string">'io.framework7.testapp'</span><span class="token punctuation">,</span>
  vi<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    placementId<span class="token punctuation">:</span> <span class="token string">'pltd4o7ibb9rc653x14'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

<span class="token comment">// Create prepaire ad</span>
<span class="token keyword">var</span> prepairedAd<span class="token punctuation">;</span>
<span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span>sdkReady<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'viSdkReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    prepairedAd <span class="token operator">=</span> app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      autoplay<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
  prepairedAd <span class="token operator">=</span> app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    autoplay<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Show prepaired ad</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.show-prepaired'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  prepairedAd<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Create and show ad</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.create-and-show'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// With custom autplay fallback</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.create-and-show-with-custom-callback'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    fallbackOverlay<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token function-variable function">autoplayFailed</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> ad <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Check out this awesome ad'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
          ad<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Create and show rewarded ad</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.create-and-show-rewarded'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span>vi<span class="token punctuation">.</span><span class="token function">createAd</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    autoplay<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token function-variable function">ready</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> ad <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Check out this awesome ad to get the reward'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
          ad<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">complete</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Congrats! You got the reward!'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">userexit</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Sorry, no reward for you!'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>